<!-- <template>
    <div>
        <a-modal v-model:visible="visible" :width="600">
        <template #title>
            <h3>试验信息填写</h3>
        </template>
        <template #footer>
            <a-button key="back" @click="handleCancelClick" class="btn">取消</a-button>
            <a-button key="submit" type="primary" @click="handleOkClick" class="sub-btn">确定</a-button>
        </template>
        <div class="main">
            <a-form>
                <a-form-item name="date-picker" label="试验日期：" required>
                    <a-date-picker v-model:value="modalRef.testDate" value-format="YYYY-MM-DD" />
                </a-form-item>
                <a-form-item label="有效截止日期：">
                    <a-input v-model:value="modalRef.expirationDate" />
                </a-form-item>
                <a-form-item label="试验人：" required>
                    <a-input v-model:value="modalRef.tester" size="200px"/>
                </a-form-item>
                <a-form-item label="审核人：" required>
                    <a-input v-model:value="modalRef.auditor" />
                </a-form-item>
                <a-form-item name="date-picker" label="投运日期：" required> 
                    <a-date-picker v-model:value="modalRef.operateDate" value-format="YYYY-MM-DD" />
                </a-form-item>
                <a-form-item label="试验结论：" required>
                    <a-space>
                        <a-select ref="select" v-model:value="modalRef.conclusion" style="width: 150px">
                            <a-select-option value="0">合格</a-select-option>
                            <a-select-option value="1">报废</a-select-option>
                        </a-select>
                    </a-space>
                </a-form-item>
            </a-form>   
        </div>
        </a-modal>
      </div>
</template>

<script setup>
import { ref,reactive } from 'vue'

const visible = ref(false);
const modalRef = reactive({
    testDate: '',
    expirationDate: '',
    tester: '',
    auditor: '',
    operateDate:'',
    conclusion:'',
})

const showModal = () => {
    visible.value = true;
};
//取消按钮
const handleCancelClick = () => {
  visible.value = false;
}; 
// 确定按钮
const handleOkClick = () => {
    visible.value = false;
} 
defineExpose({
    showModal,
})
</script>

<style lang="less" scoped>
// .main{
//     padding-left: 50px;
// }
h3{
    display: inline-block;
    font-weight: 900;
  }
.sub-btn{
      background-color: #169bd5;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 15px;
      color: white;
      height: 38px;
      width: 80px;
      padding: 0;
  }    
  .btn{
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 15px;
      color: #292929;
      height: 38px;
      width: 80px;
      padding: 0;
  } 
  /deep/ .ant-input{
    width: 150px;
  }
  /deep/.ant-form-item-label > label{
   	 	width: 150px;
    	justify-content: flex-end;
	}
</style> -->

<template>
    <div>
        <a-modal v-model:visible="visible" :width="600" destroyOnClose>
        <template #title>
            <h3>试验信息填写</h3>
        </template>
        <template #footer>
            <a-button key="back" @click="handleCancelClick" class="btn">取消</a-button>
            <a-button key="submit" type="primary" @click="handleOkClick" class="sub-btn">确定</a-button>
        </template>
        <div class="main">
            <a-form>
                <a-form-item name="date-picker" label="试验日期：">
                    <a-date-picker v-model:value="modalRef.testDate" value-format="YYYY-MM-DD" />
                </a-form-item>
                <a-form-item label="有效截止日期：">
                    <a-input v-model:value="modalRef.expirationDate" />
                </a-form-item>
                <a-form-item label="试验人：" required>
                    <a-input v-model:value="modalRef.tester" size="200px"/>
                </a-form-item>
                <a-form-item label="审核人：" required>
                    <a-input v-model:value="modalRef.auditor" />
                </a-form-item>
                <a-form-item name="date-picker" label="投运日期：">
                    <a-date-picker v-model:value="modalRef.operateDate" value-format="YYYY-MM-DD" />
                </a-form-item>
                <a-form-item label="试验结论：" required>
                    <a-space>
                        <a-select ref="select" v-model:value="modalRef.operateConclusion" style="width: 150px">
                            <a-select-option value="0">合格</a-select-option>
                            <a-select-option value="1">报废</a-select-option>
                        </a-select>
                    </a-space>
                </a-form-item>
            </a-form>   
        </div>
        </a-modal>
      </div>
</template>

<script setup>
import { ref,reactive,watchEffect } from 'vue'
import { Form } from 'ant-design-vue'
import request from '@/utils/request'

const visible = ref(false);
const id = ref()
const props=defineProps(['selectedKeys','toolId'])
const emit=defineEmits(['loadData'])
const modalRef = reactive({
    testDate: '',
    expireDate: '',
    tester: '',
    auditor: '',
    operateDate:'',
    operateConclusion:'',
})

const rulesRef = reactive({
    testDate: [{
        required: true,
        message: '请填写试验日期',
    }],
    tester: [{
        required: true,
        message: '请填写试验人',
    }],
    auditor: [{
        required: true,
        message: '请填写审核人',
    }],
    operateDate: [{
        required: true,
        message: '请填写投运日期',
    }],
    operateConclusion: [{
        required: true,
        message: '请填写试验结论',
    }],
})

watchEffect(() => {
    id.value = props.toolId
    id.value = Number(id.value)
    console.log(typeof(id.value));
})
// const useForm = Form.useForm
// const { validate, validateInfos, mergeValidateInfo } = useForm(modalRef, rulesRef)

const loadData = async() => {
    //把数组对象展开成数组
    // modalRef.idList = props.selectedKeys
    let result = await request({
        url:'/toolDetail/edit',
        method:'post',
        data:{
            ...modalRef,
            id:id.value
        }
    })
    console.log(result)
}
const showModal = () => {
    visible.value = true;
};
//取消按钮
const handleCancelClick = () => {
  visible.value = false;
}; 
// 确定按钮
const handleOkClick = async() => {
    await loadData()
    emit('loadData')   
    console.log(1111)  
    visible.value = false 
    // validate().then(() => {
    //     loadData()
    //     emit('loadData')     
    //     visible.value = false    
    // }).catch(err => {
    //         console.log('error', err);
    //     });
    // visible.value = false;  
};

defineExpose({
    showModal,
})
</script>

<style lang="less" scoped>
// .main{
//     padding-left: 50px;
// }
h3{
    display: inline-block;
}
.sub-btn{
      background-color: #169bd5;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 15px;
      color: white;
      height: 38px;
      width: 80px;
      padding: 0;
  }    
  .btn{
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 15px;
      color: #292929;
      height: 38px;
      width: 80px;
      padding: 0;
  } 
  /deep/ .ant-input{
    width: 150px;
  }
  /deep/.ant-form-item-label > label{
   	 	width: 150px;
    	justify-content: flex-end;
	}
</style>